<template>
    <div class="login">
      <div class="title">登陆页</div>
      <van-form @submit="login">
  <van-field
  class="input-box"
    v-model="formData.phone"
    placeholder="输入用户名"
    :rules="[{required: true, pattern:/^1[3-9]\d{9}$/, required: true, message: '请填写用户名' }]"
  />
  <van-field
  class="input-box"
    v-model="formData.pass"
    type="password"
    placeholder="输入密码"
    :rules="[{ pattern:/^\d{4}$/,required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">登录</van-button>
  </div>
</van-form>
  
    </div>
  </template>
  
  <script>
  import { Toast } from 'vant';
  import {userLogin} from '../utils/service'
  
  export default {
    data(){
      return {
        formData:{
          phone:'',
          pass:''
        }
      }
    },
    methods:{
      login(){
          userLogin( this.formData ).then((res)=>{
            if( res.data.code == 200 ){
              //保存用户信息,token
              localStorage.setItem('token',res.data.token);
              localStorage.setItem('userinfo', JSON.stringify( res.data.userinfo ) );
              //自动跳转到首页
              this.$router.push('/');
              Toast.success("登陆成功")
            }else{
                Toast.fail("登陆失败")
            }
          })
        }
      }
    }
  
  </script>
  
  <style lang='scss' scoped> 
  .login{
    margin: 50px 20px;
  }
  .login .title{
    font-weight: bold;
    text-align: center;
    line-height: 40px;
  }
  .login .input-box{
  border: 1px solid #ccc;
  margin: 30px 0;
  border-radius: 30px;
}
  </style>